<template>
    <div class="mainContent">
        <path-tracking :path='path' />
        <div class="pageContent">
            <div class="table-title">
                <div class="table-icon"></div>
                <div class="table-fl">查询条件</div>
            </div>
            <advanced-search
                style="margin-top: -10px;"
                :option="filterOption"
                @onSearch="debounceRequest"
                ref="advancedSearch"
            />
            <!-- 列表标题&操作按钮 -->
            <el-row style="margin-top: 1.5rem;">
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">预约查询列表</div>
                </div>
            </el-row>
            <el-row style="padding: 0 16px;background: #FFF;">
                <el-table
                    :data="scheduledListData"
                    :row-style="selectedHighlight"
                    max-height="550"
                    ref="recordList"
                    @selection-change="scheduledListItem"
                >
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                    />
                    <el-table-column
                        v-for='(item, index) in scheduledListItem'
                        :key="index"
                        :prop='item.prop'
                        :label='item.label'
                        :width="item.width"
                        align='center'
                    >
                        <template slot-scope="scope">
                            <div>
                                {{translateData(scope.row, item)}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="170"
                        align='center'
                    >
                        <template slot-scope="scope" style="width: 100%;">
                            <div class="btnsCan">
                                <div v-if="seeDetailBtn" @click="seeDetail(scope.row)" class="operateBtn check">
                                    查看
                                </div>
                                <div @click="goFollowUp(scope.row)" class="operateBtn followUp" v-if="scope.row.bookingStatus === 1 && followUp">
                                    客服跟进
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-row class="pagination-cont">
                    <el-pagination
                        @size-change="handleSizeChange"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPageIndex"
                        :page-sizes="pageSizeList"
                        :page-size="currentPageSize"
						:pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    />
                </el-row>
            </el-row>
        </div>
    </div>
</template>
<script>
import pathTracking from '@/components/common/pathTracking'
import advancedSearch from '@/components/common/filter/advancedSearch.vue'
import { getResource, getPendingOrders } from './axios.js'
import { getFollowUpList } from '../bookedCustomer/axios.js'
import datas from './datas.js'
// 获取按钮权限配置的方法
import operationConfig from '@/utils/btnsPermission'
import seeDetailDatas from '../component/seeDetail/datas.js'
export default {
    name: 'allBooked',
    data() {
        return{
            path: ['CRM', '预约管理', '预约查询'],
            // 搜索条件
            filterOption: _.cloneDeep(datas.filterOption),
            // 当前每页显示的条数
            currentPageSize: 10,
            pageSizeList: [10, 20, 30, 40],
            total: 0,
            // 当前页码
            currentPageIndex: 1,
            // 预约列表项
            scheduledListItem: datas.scheduledListItem,
            // 预约列表内容
            scheduledListData: [],
            // 选中项的数组
            TableSelectData: [],
            currentSearchClue: [],
            timer: null,

            seeDetailBtn: false,
            followUp: false
        }
    },
    components: {
        pathTracking,
        advancedSearch,
    },
    methods: {
        // 点击搜索
        toSearch(tip) {
            let obj = {}
            let clue = this.$refs.advancedSearch.getFormData();
            if(JSON.stringify(this.currentSearchClue) !== JSON.stringify(clue)) {
                this.currentPageIndex = 1
                this.currentSearchClue = clue
            }
            let doSearch = false
            clue.map(ele => {
                if(ele.value !== '' && ele.value != undefined) {
                    doSearch = true
                    if(ele.key === 'createTime') {
                        obj.createTimeStart = new Date(ele.value[0]).getTime()
                        obj.createTimeEnd = new Date(ele.value[1]).getTime() + 24 * 60 * 60 * 1000 - 1000
                    }else if(ele.key === 'reservationTime') {
                        obj.reservationStartTimeQuery = new Date(ele.value[0]).getTime()
                        obj.reservationEndTimeQuery = new Date(ele.value[1]).getTime()
                    }else if(ele.type === 'areaSelect') {
                        ele.value.area && (obj.area = ele.value.area)
                        ele.value.store && (obj.shop = ele.value.store)
                    }else if(ele.key === 'status') { 
                        ele.value > 3
                        ?
                        obj.auditingStatus = ele.value
                        :
                        obj.status = ele.value
                    }else {
                        obj[ele.key] = ele.value
                    }
                }
            })
            if(!doSearch && tip === 'noTip'){
                this.scheduledListData = []
                this.total = 0
                return
            }
            if(!doSearch) {
                this.$message({
                    message: '请选择查询条件',
                    type: 'warning'
                })
                return
            }
            let param = {
                condition: obj,
                pageIndex: this.currentPageIndex,
                pageSize: this.currentPageSize,
                pageTotal: 5,
                total: 0
            }
            getPendingOrders(param).then(res => {
                if(res.data.status === 200) {
                    this.scheduledListData = res.data.result.result
                    this.total = res.data.result.total
                }else {
                    this.$message({
                        showClose: true,
                        message: res.data.msg,
                        type: 'error'
                    });
                }
            }).catch(err => {
                this.$message({
                    showClose: true,
                    message: '查询失败',
                    type: 'error'
                });
            });
        },
        // 创建预约
        createBtn() {
            this.$refs.createPopup && this.$refs.createPopup.openBox();
        },
        // 查看
        seeDetail(param) {
            this.$router.push({name: 'seeDetailAll', query: {searchKey: param.id}})
        },
        // 客服跟进
        goFollowUp(param) {
            this.$router.push({name: 'allFollowUp', query: {searchKey: param.id}})
        },
        translateData(data, item) {
            let res = ''
            switch (item.prop) {
                case 'reservationDate':
                    data.reservationStartTime && (res = data['reservationStartTime'].split(' ')[0])
                    break;
                case 'reservationTime':
                    data.reservationStartTime 
                    && data.reservationEndTime 
                    && (res = `${data.reservationStartTime.split(' ')[1]}-${data.reservationEndTime.split(' ')[1]}`)
                    break;
                case 'status':
                    seeDetailDatas.statusList.map(ele => {
                        ele.value == data[item.prop] && (res = ele.label)
                    })
                    break;
                case 'bookingStatus':
                    seeDetailDatas.bookList.map(ele => {
                        ele.value == data[item.prop] && (res = ele.label)
                    })
                    break;
                case 'isArrival':
                    data[item.prop] ? res = '是' : res = '否'
                    break;
                case 'isDeal':
                    data[item.prop] ? res = '是' : res = '否'
                    break;
                default: 
                    res = data[item.prop]
                    break;
            }
            return res
        },
        // 更改每一页显示数量
        handleSizeChange (size) {
            if(this.currentPageSize != size) {
                this.currentPageSize = size;
                this.debounceRequest()
            }
        },
        handleCurrentChange (index) {
            if(this.currentPageIndex != index) {
                this.currentPageIndex = index;
                this.debounceRequest()
            }
        },
        // 获取跟进人列表
        getFollowUp() {
            getFollowUpList().then(res => {
                if(res.data.status === 200) {
                    let arr = [{
                        label: '请选择创建人',
                        value: undefined
                    }]
                    res.data.result.map(ele => {
                        arr = arr.concat({
                            label: ele.userName,
                            value: ele.sapUserId
                        })
                    })
                    this.filterOption.items.map(ele => {
                        ele.key === 'createBy' && (ele.data = arr)
                    })
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 调用查询接口
        debounceRequest() {
            if(this.timer) {
                clearTimeout(this.timer);
                this.timer = null
            }
            this.timer = setTimeout(() => {
                this.toSearch();
                clearTimeout(this.timer);
                this.timer = null;
            }, 300)
        },
        // 选中的数组
        handleSelectionChange (selection) {
            this.TableSelectData = selection;
        },
        // 如果选中则添加高亮样式
        selectedHighlight (data) {
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                    "background-color": "#FEF6EE"
                };
                return {}
            }
        },
        // 按钮权限
        btnsControl() {
            let permission = operationConfig(this.$route);
            this.seeDetailBtn = false
            this.followUp = false
            permission.forEach(ele => {
                if(ele.menu_name === '查看') {
                    this.seeDetailBtn = true
                }else if(ele.menu_name === '客服跟进') {
                    this.followUp = true
                }
            })
        }
    },
    mounted() {
        console.log('called every time')
        this.getFollowUp();
        this.btnsControl();
        getResource().then(res => {
            if(res.data.status === 200) {
                let arr = [{
                    label: '请选择预约来源',
                    value: undefined
                }]
                res.data.result.map(ele => {
                    arr.push({
                        label: ele.value,
                        value: ele.value
                    })
                })
                this.filterOption.items.map(ele => {
                    ele.key === 'source' && (ele.data = arr)
                })
            }
        }).catch(err => {
            console.log('err: ', err)
        })
    },
    activated() {
        this.toSearch('noTip');
        this.btnsControl();
    },
    deactivated() {
        
    },
}
</script>
<style scoped>
    .pageContent{
        padding: 16px;
    }
    .table-title {
        width: 100%;
        height: 58px;
        background-color: #fff;
        border-radius: 8px 8px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* overflow: hidden; */
    }

    .table-title .table-icon {
        width: 6px;
        height: 18px;
        background-color: #7e6b5a;
        float: left;
        margin-left: 19px;
    }

    .table-title .table-fl {
        font-size: 16px;
        color: #222222;
        margin-left: 8px;
    }
    .createBtn{
        width: 8rem;
        height: 3rem;
        background: rgb(84, 165, 231);
        color: #FFF;
        text-align: center;
        line-height: 3rem;
        border-radius: 0.4rem;
        font-size: 1.4rem;
        margin-top: 1.5rem;
        cursor: pointer;
    }
    .pagination-cont{
        height: 10rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .btnsCan{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .operateBtn{
        width: 5rem;
        height: 2.4rem;
        cursor: pointer;
        line-height: 2.4rem;
        border-radius: 1.2rem;
        color: #7E6B5A;
        border: 1px solid #7E6B5A;
    }
    .followUp{
        width: 7rem;
        margin-left:0.8rem;
    }
    /* .check{
        background: #7E6B5A;
        color: #FFF;
    } */
</style>
